<template>
  <el-dialog :visible.sync="isShow" v-if="isShow" title="菜单信息" width="50%" :before-close="handleClose" top="50px" :close-on-click-modal="false">
    <div class="border-box">
      <el-form ref="ruleForm" :model="formParams" :rules="ruleForm" label-position="right" label-width="0">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            {{ item.label }}
          </div>
          <div class="content width80">
            <el-form-item class="item-clear" v-show="item.key=='types'" prop="types">
              <el-radio-group v-model="formParams.types">
                <el-radio-button :label="1">左侧导航栏</el-radio-button>
                <el-radio-button :label="2">中间导航栏</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='icon'" label="" prop="icon" style="height:auto;">
              <imgUpLoad :url="formParams.icon" @success='imgUploadChangIcon'/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='name'" label="" prop="name">
              <el-select class="width360" v-model="formParams.name" placeholder="请选择导航名称" filterable>
                <el-option :label="second.label" :value="second.value" v-for="(second, two) in languageArray" :key="two"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='parent_id'" label="" prop="parent_id">
              <el-input-number :min="1" :max="999999999" :precision="0" v-model="formParams.parent_id" controls-position="right" clearable placeholder="请输入上级ID"/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='game_ids'" label="" prop="game_ids">
              <el-select class="width360" v-model="formParams.game_ids" placeholder="请选择导航栏显示的游戏" filterable multiple>
                <el-option :label="second.label" :value="second.value" v-for="(second, two) in GAME_TYPE" :key="two"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('ruleForm') ">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addNavigation,
  editNavigation,
} from '@/api/game'
import imgUpLoad from '@/components/imgUpLoadSingle'
import {
  GAME_TYPE
} from '@/utils/enum'
export default {
  components: {
    imgUpLoad
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
    languageArray: {
      type: Array,
      default: function () {
        return this.$store.state.commonState.languageDataArray
      }
    },
  },
  data () {
    return {
      GAME_TYPE,
      isShow: false,
      languageArrayMap: new Map(),
      // treeData: JSON.parse(JSON.stringify(data)),
      itemData:[
        { label: '导航栏', key: 'types',},
        { label: '图标', key: 'icon',},
        { label: '导航栏名称', key: 'name' },
        { label: '上级ID', key: 'parent_id' },
        { label: '游戏ID', key: 'game_ids' },
      ],
      isShowDetails:false,
      checkedItem: null,
      formParams: {
        types: 1,
        icon: '',
        name: '',
        parent_id: 0,
        game_ids: [],
      },
      ruleForm: {
        // a_game_num: [{ required: true, trigger: 'blur', message: '请输入游戏人数上限', }],
      },
    }
  },
  computed: {},
  activated(){},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
      } else {
        that.formParams = {
          types: 1,
          icon: '',
          name: '',
          parent_id: 0,
          game_ids: [],
        }
      }
    },
  },
  mounted () {},
  methods: {
    // 确认
    handleConfirm (formvalue) {
      let that = this, params = JSON.parse(JSON.stringify(that.formParams));
      params.game_ids=params.game_ids.toString(',')
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          // 新增
          if (!params.id) {
            addNavigation(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          } else {
            editNavigation(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    append(data) {
      this.isShowDetails=true
      this.checkedItem=data
    },
    addMenu(){
      let that=this,index=0,data=that.checkedItem,params=JSON.parse(JSON.stringify(that.formParams));
      params.game_ids=params.game_ids.toString(',')
      addNavigation(params).then(function (res) {
        that.isShowDetails=false
        if(res.code==1){
          if(data.children && data.children.length!=0){
            index=data.children[data.children.length-1].index+1
          }else{
            index=data.index+1
          }
          const newChild = { index: index, label: this.languageArrayMap.get(params.name), children: [] };
          if (!data.children) {
            this.$set(data, 'children', []);
          }
          data.children.push(newChild);
        }
      }).catch((error) => {
        that.$message.error(error.msg)
        that.isShowDetails=false
      })
    },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.index === data.index);
      children.splice(index, 1);
    },
    // 上传图片
    imgUploadChangIcon (url) {
      this.formParams.icon = url
    },
    // 取消
    handleCloseShow() {
      this.isShowDetails=false
    },
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
